<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useIconsStore } from '../stores/icons.js'
import { useAppStore } from '../stores/app.js'
import SvgIcon from '../components/SvgIcon.vue';
import px2vw from '../utils/px2vw'

const router = useRouter()
const iconsState = useIconsStore()
const appState = useAppStore()
const iconList = reactive([
  // {
  //   name: 'weibo',
  //   bg: '#f4c43d',
  //   link: '',
  //   version: 100
  // },
  {
    name: 'douyin',
    bg: '#111111',
    link: '/tiktok',
    version: 100
  }, {
    name: 'zhifubaozhifu1',
    bg: '#009fe8',
    link: '/zhifubao',
    version: 100
  }, 
  // {
  //   name: 'ziyuan',
  //   bg: '#FFCC80',
  //   link: '/gold',
  //   version: 100
  // }, 
  {
    name: 'icon-test',
    bg: '#fff',
    link: '/tool',
    version: 100
  }
])

onMounted(() => {
})


const minPositionFilter = (index, bg) => {
  const height = 50
  const bool = index % 2
  const tagWidth = 375 * 0.4
  const space = (375 - tagWidth * 2) / 3
  const row = Math.ceil(index / 2)
  return {
    top: px2vw((row * (height + 10)) - height),
    height: px2vw(height),
    width: px2vw(tagWidth),
    left: px2vw(!bool ? space * 2 + tagWidth : space),
    borderRadius: px2vw(5),
    backgroundColor: bg
  }
}

const maxPositionFilter = (index, bg) => {
  const height = 50
  return {
    width: '80%',
    height: px2vw(height),
    left: '0',
    right: '0',
    top: px2vw((index * (height + 10)) - height),
    margin: ' 0 auto',
    borderRadius: px2vw(25),
    backgroundColor: bg
  }
}

const isToRouter = (item) => {
  // if (appState.app.currentAppVersion < item.version) {
  //   Snackbar.warning('请更新为最新版')
  //   return
  // }

  router.push(item.link)
}

</script>

<template>
  <div class="home">
    <div class="list-box">
      <div v-for="(item, index) in iconList" :key="index"
        :style="iconsState.isIcon ? maxPositionFilter(index + 1, item.bg) : minPositionFilter(index + 1, item.bg)"
        @click="isToRouter(item)">
        <SvgIcon :style="{ fontSize: px2vw(30) }" :iconName="item.name" />
      </div>
    </div>

  </div>
</template>


<style lang='scss' scoped>
.home {
  width: 100%;


  .list-box {
    position: relative;

    div {
      position: absolute;
      transition: all 0.5s;
      text-align: center;
      line-height: 55px;
    }
  }

}
</style>